<!-- yu-button组件 -->
<script setup>
const props = defineProps({
  btnPadding: {
    type: String,
    default: '10px 20px'
  },
  btnBorder: {
    type: String,
    default: 'none'
  }
})
</script>

<template>
  <button class="btn">
    <slot></slot>
  </button>
</template>

<style lang="less" scoped>
.btn {
  padding: v-bind('props.btnPadding');
  background-image: linear-gradient(to right, #29323c 0%, #485563 100%);
  background-size: 200% auto;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  border: v-bind('props.btnBorder');
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

.btn:hover {
  background-position: right center;
}
</style>
